﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>领取会员卡</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link href="/carworld_weixin/css/bootstrap.min.css" rel="stylesheet">
<link href="/carworld_weixin/css/received_card_style.css" rel="stylesheet" type="text/css">
<script src="/carworld_weixin/js/jquery-3.3.1.min.js"></script>
<script src="/carworld_weixin/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {
		$(".aui-head-title").click(function() {
			$(this).toggleClass("aui-current-up").siblings(".aui-head-title").removeClass("aui-current-up");
			$(this).toggleClass("aui-current-tx").siblings(".aui-head-title").removeClass("aui-current-tx");
			$(this).next(".aui-box-content").slideToggle(100).siblings(".aui-box-content").slideUp(400);
		})
	})
</script>

<style type="text/css">
.tb960x90 {
	display: none !important;
	display: none
}
</style>
</head>
<body>

	<section class="aui-flexView">
		<header class="aui-navBar aui-navBar-fixed">
			<!-- <a href="javascript:history.back(-1)" class="aui-navBar-item">
				<i class="icon icon-return"></i>
			</a> -->
			<div class="aui-center">
				<span class="aui-center-title" id="office_name"></span>
			</div>
		</header>
		<section class="aui-scrollView">
			<div class="aui-show-content">
				<div>
					<img src="/carworld_weixin/images/received_card.jpg" alt="" style="width: 100%; height: 180px;">
				</div>
				<div class="aui-show-user">
					<img src="" alt="" id="sharer_photo">
				</div>
			</div>
			<div class="aui-show-head">
				<div>
					来自您的好友
					<span id="sharer_name"></span>
					分享的会员卡
				</div>
			</div>
			<div class="aui-show-button b-line">
				<a href="javascript:;" onclick="isShowQr()">立即领取</a>
			</div>
			<div class="aui-flex b-line">
				<div class="aui-show-doctor">
					<i class="icon icon-doctor"></i>
					套餐内容：
					<span style="font-size: 16px;" id="meal_name"></span>
				</div>
			</div>

			<div class="aui-show-list b-line">
				<div class="aui-flex">
					<span style="font-size: 16px;">这是我投资的一家汽车养护店~</span>
				</div>

				<div class="aui-head-title aui-current-up aui-current-tx"></div>
				<div class="aui-box-content" style="display: block;">
					<div class="aui-flex">
						<div class="aui-show-doctor">
							<i class="icon icon-vip"></i>
						</div>
						<div class="aui-flex-box">
							<span>项目施工质量好，而且速度快;</span>
						</div>
					</div>
					<div class="aui-flex">
						<div class="aui-show-doctor">
							<i class="icon icon-vip"></i>
						</div>
						<div class="aui-flex-box">
							<span>服务周到，门店员工热情周到，很满意;</span>
						</div>
					</div>
					<div class="aui-flex">
						<div class="aui-show-doctor">
							<i class="icon icon-vip"></i>
						</div>
						<div class="aui-flex-box">
							<span>价格优惠，质量有保证，实实在在的贴心</span>
						</div>
					</div>
				</div>
			</div>
			<div class="aui-show-follow">
				<a href="javascript:;" class="">
					<b>32</b>
					个朋友领此会员卡
				</a>
				<a href="javascript:;" class="">
					<b>1256</b>
					位会员关注了此店
				</a>
			</div>
			<div class="divHeight"></div>
			<div class="aui-flex">
				<div class="aui-show-doctor">
					<i class="icon icon-vip"></i>
					地址
				</div>
				<div class="aui-flex-box"></div>
				<div class="aui-show-arrow" id="office_address"></div>
			</div>
			<div class="divHeight"></div>
		</section>
	</section>

	<!--弹出二维码关注 -->
	<div class="modal fade" id="showQr" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">长按二维码关注后立即登录</h4>
				</div>
				<div class="modal-body" style="text-align: center">
					<img src="/carworld_weixin/images/logo.min.png" />
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<!--补充用户的信息  -->
	<div class="modal fade" id="fillIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">请完善您的个人信息~</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="name">姓名</label>
						<input id="userName" type="text" class="form-control" id="userName" placeholder="请填写真实名字">
					</div>
					<div class="form-group">
						<label for="name">手机号</label>
						<input id="mobile" type="text" class="form-control" id="mobile" placeholder="无需短信验证">
					</div>
					<div class="form-group">
						<label for="name">车牌号</label>
						<input id="carLicense" type="text" class="form-control" id="carLicense" placeholder="请填写正确车牌号">
					</div>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="validateBtn">提交更改</button>
				</div>
			</div>
		</div>
	</div>


	<script>
		var json = '${jsonObject}';
		var data = JSON.parse(json);
		$('#sharer_photo').attr('src', data.sharerPhoto);
		$('#office_name').html(data.officeName);
		$('#sharer_name').html(data.sharerName);
		$('#meal_name').html(data.mealName);
		$('#office_address').html(data.officeAddress);

		function isShowQr() {
			if (data.state == 0 || data.state == -1) {
				alert(data.message);
				return;
			}
			
			alert(data.message);
			
			if (data.supplyInfo == 0) {
				$('#fillIn').modal();
				return;
			}
			$('#showQr').modal();
			if(data.isSupplyInfo =! 0&&data.userIsFocus != 0){
				window.location.href = '/carworld_weixin/';
			}
		}

		//用户补充会员信息
		$('#validateBtn').click(function() {
			var userName = $('#userName').val();
			var mobile = $('#mobile').val();
			var carLicense = $('#carLicense').val();

			//手机号合法性验证
			function checkPhone(mobile) {
				if (!(/^1[34578]\d{9}$/.test(mobile)))
					return false;
				return true;
			}

			if (userName == null) {
				alert('用户名不能为空');
				return;
			}
			if (mobile == null || !checkPhone(mobile)) {
				alert('请填写正确的手机号~');
				return;
			}
			if (carLicense == null) {
				alert('车牌号不能为空~');
				return;
			}

			$.ajax({
				type : 'POST',
				url : '/carworld_weixin/user/supplyUserInfo',
				data : {
					'userName' : userName,
					'mobile' : mobile,
					'carLicense' : carLicense
				},
				dataType : 'text',
				success : function(result) {
					$("#fillIn").modal('hide');
					if (result == 'success') {
						if (data.userIsFocus == 0) {
							$('#showQr').modal();
						} else {
							window.location.href = '/carworld_weixin/pages/page_myVipCard.html';
						}

					} else {
						alert('信息补充失败，请联系管理员~');
						window.location.href = '/carworld_weixin/';
					}
				},
				error : function(jqXHR, textStatus, errorThrown) {
					alert(textStatus);

				}
			});

		})
	</script>


</body>
</html>

